<!DOCTYPE html>
<meta charset="UTF-8">
<title>checkbox</title>
<link rel="import" href="../../common/layout.html">
<style>
	h2 {
		margin-top: 30px;
	}
</style>

<main ng-app="app" ng-controller="ctrl">
	<h1>Checkbox Demo</h1>
	<p>Support Attribute</p>
	<ul style="list-style: disc">
		<li style="list-style: inside">ng-model</li>
		<li style="list-style: inside">ng-disabled</li>
		<li style="list-style: inside">ng-checked</li>
		<li style="list-style: inside">ng-change</li>
		<li style="list-style: inside">ng-true-value</li>
		<li style="list-style: inside">ng-false-value</li>
		<li style="list-style: inside">indeterminate</li>
	</ul>

	<div>
		<h2>Demo 1: normal use.</h2>
		<p>setting ng-model of the component.</p>
		value: {{demo1}}<br/>
		<cc-checkbox ng-model="demo1">demo1: using ng-model</cc-checkbox>
		<cc-checkbox ng-model="demo1">demo1: using ng-model</cc-checkbox>
		<cc-checkbox>no model</cc-checkbox>
		<button ng-click="demo1 = !demo1">change model value</button>
	</div>
	<div>
		<h2>Demo 2: Using ng-checked.</h2>
		value: {{demo2}}<br/>
		<p><b>NOTE:</b>ng-checked should not use with ng-model.</p>
		<p><b>NOTE:</b>ng-checked is only used to display that will not be changed by clicking check box. if you want to get the status of checkbox, you should change ng-checked into ng-value.</p>

		<cc-checkbox ng-checked="demo2">demo2: using ng-checked</cc-checkbox>
		<cc-checkbox ng-checked="demo2 === false">using expression</cc-checkbox>
		<button ng-click="demo2 = !demo2">change the checked</button>
	</div>
	<div>
		<h2>Demo 3: Using ng-true-value & ng-false-value.</h2>
		<p>setting ng-model of the component.</p>
		value: {{demo3.state}}<br/>
		<cc-checkbox ng-model="demo3.state" ng-true-value="demo3.trueValue" ng-false-value="demo3.falseValue" ng-change="change()">{{demo3.state}}</cc-checkbox>
	</div>
	<div>
		<h2>Demo 4: Indeterminate situation</h2>
		<p>Set indeterminate attribute true to display indeterminate situation.</p>
		value: {{demo4.value}}<br/>
		indeterminate: {{demo4.indeterminate}}<br/>
		<cc-checkbox ng-model="demo4.value" indeterminate="demo4.indeterminate" ng-change="change()">checkbox</cc-checkbox>
		<button ng-click="demo4.indeterminate = !demo4.indeterminate">change indeterminate</button>
	</div>
	<div>
		<h2>Demo 5: Disable checkbox</h2>
		<p>Use ng-disabled to disable checkbox.</p>
		value: {{demo5.value}}<br/>
		disabled: {{demo5.disabled}}<br/>
		<cc-checkbox ng-model="demo5.value" ng-disabled="demo5.disabled">{{demo5.value}}</cc-checkbox>
		<button ng-click="demo5.disabled = !demo5.disabled">change disabled</button>
	</div>

	<h3>Note for All: DO NOT use ng-bind.</h3>
</main>

<!--<script src="/node_modules/angular/angular.min.js"></script>-->
<!--<script src="/node_modules/angular-resource/angular-resource.min.js"></script>-->
<!--<script src="/dist/ccms_components.js"></script>-->
<script src="/components.js"></script>
<script src="index.js"></script>

